import React,{Component} from 'react';
import  {getDetail,AddToCart,increase}  from '../actions'
import {connect} from 'react-redux'
import { Jumbotron, Button , Breadcrumb , BreadcrumbItem } from 'reactstrap';
import { NavLink } from 'react-router-dom'


const mapStateToProps = (state)=>{
    return {
        ...state.detailpro,/* detailList: [{…}]
                             totalPro: 0 */
    }
}


class DetailPro extends Component{
    componentDidMount(){
        this.props.getDetail(this.props.match.params.id);   
    }
    addtocart(item){
        this.props.AddToCart(item);
        this.props.increase();
    }
    details(){
        var jsx=[];
        var id=0;
        this.props.detailList.map((item,index)=>{
            jsx.push(
                <div key={index}>
                    <div key={index} >
                            <div className="thumbnail" style={{backgroundColor:"#f5f5f5",padding:"10px"}}>
                                <img src={item.img} style={{width:"500px",display:"table",margin:"0 auto 0 auto"}}/><br/><br/>
                                <div className="caption" >
                                    <h2 className="display-5" style={{margin:"0 0 20px 0",fontSize:"3rem"}}>{item.name}</h2>
                                    <hr className="my-2"  />
                                    <p className="lead">{item.content}</p>
                                    <p>价格 ：￥{item.price}</p><br/>
                                    <p className="lead" style={{position:"relative"}}>
                                        <Button color="danger" onClick={()=>this.addtocart(item)} style={{fontSize:"1.5rem"}}>加入购物车</Button>
                                        <span className="badge" style={{width:"20px",height:"20px",backgroundColor:"#dc3545",position:"absolute",left:"90px",top:"-7px"}}>{this.props.totalPro}</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                </div>   
            )
            id=item.id+1;
        })
        return [jsx,id];
    }
    render(){
        
        return (
            <div style={{fontSize:"1.5rem"}}>
                <div className="panel panel-success" style={{fontSize:"1.5rem",width:"80%",margin:"50px auto"}}>
                    <div className="panel-body">
                        {this.details()[0]}
                    </div>
                </div>
 
            </div>
        )
   }
}


export default connect(mapStateToProps,{getDetail,AddToCart,increase})(DetailPro);
